<div class="ui-loading-block show">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div>
<style>
    /*.ui-header { background:transparent; }*/
    .ui-bg { 
        background:url(img/bg.jpg); 
        width:100%; 
        height:100%; top:0; bottom:0; position:fixed; 
        background-size:cover;
        -webkit-background-size:cover; 
    }
    .ui-bg .ui-shape-circle { position:absolute; right:15px; top:60px; text-align:center; }
    .ui-content { position:relative; top:0; left:0; transform:translate3D(0,370px,0); }
    .ui-whitespace { background:#fff; }
    .ui-bg-white { background:#fff; }
    .ui-list-one { background:none; }
    .ui-list li { margin-left:0; }
    .ui-list-text > li { -moz-box-align:start; -webkit-box-align:start; -o-box-align:start; box-align:start; }
    .ui-arrowlink:before{ line-height: 54px;}
    .ui-shape-circle{ font-weight: bold; }
    .ui-shape-circle small,sup{ font-weight: normal; }
    .ui-shape-circle h4 { margin-top:50px; height:50px; }
    .ui-shape-circle-success{ line-height: 65px; }
    .ui-blur { background:url(img/bg-blur.png); background:rgba(0,0,0,0.8)}
    .ui-list .ui-avatar { margin-top:10px; }
    .ui-header-change {
      background-color: rgba(255,255,255,1);
      border-bottom: solid 1px #dcdcdc;
      transition: all 0.3s;
    }
</style>
<header class="ui-header ui-header-positive">
    <i class="zg-icon zg-icon-return" onclick="javascript:history.go(-1)"></i>
    <i class="zg-icon zg-icon-love"></i>
    <i class="zg-icon zg-icon-export"></i>
</header>

<section class="ui-container">
    <div class="ui-bg">
        <div class="ui-shape-circle ui-shape-circle-warning ui-flex ui-flex-align-center">
            <em class="ui-txt-impact ui-txt-white">
            {{o.data.match.total_match}}
            </em>
        </div>
    </div>
    <!-- <div class="ui-bg ui-blur"> -->
    <!-- </div> -->

    <div class="ui-content">
        
        <div class="ui-whitespace ui-blur ui-padding-t">
            <h4 class="ui-txt-white ui-nowrap-multi ">{{o.data.house_title}}</h4>
            <p><em class="ui-txt-impact ui-txt-size24">{{o.data.min_price}}<small>万</small></em><span class="ui-txt-muted">(234567元/平米)</span></p>
            <p class="ui-txt-muted">{{o.data.click_num}}人浏览</p>
            <p class="ui-txt-muted">房源更新于{{o.data.created}}</p>
            <ul class="ui-list ui-list-one">
                <li class="ui-border-b" ng-repeat="child in o.data.children">
                    <div class="ui-avatar">
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap ui-txt-white">{{child.owner_name}}<i class="zg-icon zg-icon-talk"></i></h4>
                        <div class="ui-txt-info ui-txt-muted">中介费{{child.fee}}元</div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="ui-whitespace ui-padding-b">
            <ul class="ui-tiled ui-padding-tb ui-border-b js-tiled">
                <li>
                    <p class="ui-shape-circle ui-shape-circle-warning">{{o.data.min_price}}<small>万</small></p>
                    <h4 class="ui-padding-t">售价</h4>
                </li>
                <li>
                    <p class="ui-shape-circle ui-shape-circle-danger">{{o.data.house_room}}<small>室</small>{{o.data.house_hall}}<small>厅</small></p>
                    <h4 class="ui-padding-t">户型</h4>
                </li>
                <li>
                    <p class="ui-shape-circle ui-shape-circle-success">{{o.data.house_totalarea}}<small>m</small><sup>2</sup></p>
                    <h4 class="ui-padding-t">面积</h4>
                </li>
            </ul>
            
            <ul class="ui-row ">
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted ui-padding-t">楼　　层：</span>{{o.data.house_floor}}楼层
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">朝　　向：</span>{{o.data.house_toward}}
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">装　　修：</span>{{o.data.house_fitment}}
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">楼　　型：</span>--
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">年　　代：</span>--
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">产　　权：</span>70年
                </li>
                <li class="ui-col ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">首　　付：</span>--
                </li>
                <li class="ui-col ui-arrowlink ui-nowrap ui-padding-t">
                    <span class="ui-txt-muted">小区信息：</span>{{o.data.borough_name}}
                </li>
                <li class="ui-col ui-arrowlink ui-nowrap ui-padding-t" ng-repeat="sc in o.data.schooltoborough | limitTo:1">
                    <span class="ui-txt-muted" >学区信息：</span>{{sc.school_name}}
                </li>
                <li class="ui-col ui-arrowlink ui-nowrap ui-padding-t">
                    <span class="ui-txt-muted">小区治安：</span><i class="zg-icon-star zg-icon-star-4"></i>
                </li>
                <li class="ui-col ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">地理位置：</span>{{o.data.addr}}
                </li>
                <li class="ui-col ui-padding-t">
                    <div class="ui-placehold-img" id="allmap">
                    </div>
                </li>
            </ul>
        </div>
        
        <div class="ui-whitespace ui-padding-b ui-border-t ui-border-t10">
            <h2 class="ui-block-title ui-txt-size14 ui-padding-tb ui-txt-muted"><i class="zg-icon zg-icon-split"></i>匹配度</h2>
        </div>

        <div class="ui-bg-white ui-flex ui-flex-pack-center">
            <circle circle-model="dd"></circle>
        </div>


        <div class="ui-whitespace ui-padding-b ui-border-t ui-border-t10">
            <h2 class="ui-block-title ui-txt-size14 ui-padding-tb ui-txt-muted"><i class="zg-icon zg-icon-split"></i>小区房价趋势图</h2>
        </div>
        
        <div class="ui-bg-white ui-flex ui-flex-pack-center" style="overflow:hidden">
            <line></line>
        </div>
        <div class="ui-whitespace ui-padding-b ui-border-t">
            <h2 class="ui-block-title ui-txt-size14 ui-padding-t ui-txt-muted"><i class="zg-icon zg-icon-split"></i>小区最新成交价</h2>
            <ul class="ui-row" ng-repeat="borough in o.data.borough_sell_finish_list | limitTo:1">
                <li class="ui-col ui-txt-warning ui-flex ui-flex-pack-center"><span style="font-size:36px;">{{borough.finish_price}}</span><small>万</small></li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">面积：</span>{{borough.house_area}}平方米
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">位置：</span>{{h.borough_name}}
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">价钱：</span>{{(borough.finish_price/borough.house_area)*10000|number:2}}元/平米
                </li>
                <li class="ui-col ui-col-50 ui-padding-t ui-nowrap">
                    <span class="ui-txt-muted">时间：</span>{{borough.finish_time|date}}
                </li>
            </ul>
        </div>

        <div class="ui-whitespace ui-border-t10">
            <h2 class="ui-block-title  ui-border-b "><i class="zg-icon zg-icon-split"></i>同房源点评</h2>
            <ul class="ui-list ui-list-text">
                <li class="ui-border-b" ng-repeat="comment in o.data.house_comment | limitTo:3">
                    <div class="ui-avatar"></div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap"></h4>
                        <h5 class="ui-nowrap">匿名</h5>
                        <p class="ui-nowrap-multi">{{comment.content}}</p>
                    </div>
                    <div class="date ui-txt-size12 ui-txt-muted">{{comment.create_time|date:"yyyy-MM-d"}}</div>
                </li>
            </ul>
            <div class="ui-padding-tb ui-flex ui-flex-pack-center"><a href="#" class="ui-txt-warning">点击查看更多</a></div>
        </div>
    </div>
    
</section>
